<template>
    <div class="content-container">
        <!-- 工具栏 -->
    <div ref="adminContentTools" class="content-tools-wrap hidden">
      	<div class="tools-left f-l">
      		
      		<el-button-group>
			       <el-button type="primary" @click="handleAdd">新增农事信息</el-button>
			   </el-button-group>

      	</div>
      	<div class="tools-right f-r">
      		
			      <div class="search-wrap" style="display: inline-block;">
              <el-input placeholder="请输入关键词" v-model="keywords">
                <template slot="append">
                  <i class="icon el-icon-search"></i>
                </template>
              </el-input>
            </div>
			
      	</div>
    </div>
    <!-- 内容栏--表格 -->
    <div class="content-table-wrap" v-loading="loading" loading-type="chrome-circle-turn"  :style="{height:ResultHeight+'px'}">
        <el-table
        v-if="data"
        size="small"
        :data="data"
        :height.sync="tableHeight"
        :header-cell-style="{background:'#42b983',color:'#ffffff'}"
        :cell-style="{borderWidth:0}"
        style="width: 100%"
      >
    		
        <el-table-column
          fixed
          prop="id"
          label="ID"
          width="150">
        </el-table-column>

        <el-table-column
		      prop="farmCode"
		      label="农事序号"
		      width="200">
		    </el-table-column>

    		<el-table-column
		      fixed
		      prop="farmName"
		      label="农事名称"
		      min-width="150">
		    </el-table-column>

       

		    <!-- <el-table-column
		      prop="cropNo"
		      label="作物编号"
		      width="200">
		    </el-table-column> -->
 
        <el-table-column
          class="oprate"
		    	fixed="right"
		      label="操作"
          width="280"
		    >
		      <template slot-scope="scope">
            <el-button-group>
              <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleEdit(scope.row)"></el-button>

              <!-- <el-button type="primary" size="mini" icon="el-icon-setting"></el-button>

              <el-button type="primary" size="mini" icon="el-icon-grape"></el-button>
              <el-button type="primary" size="mini" icon="el-icon-s-promotion"></el-button>

              <el-button type="primary" size="mini" icon="el-icon-video-camera"></el-button> -->
              
              <el-button type="primary" size="mini" icon="el-icon-delete"  @click="handleDel(scope.row)"></el-button>
            </el-button-group>
		      	

		      </template>

		    </el-table-column>

    	</el-table> 
         <!-- 分页 -->
      <div ref="adminContentPagination" class="content-pagination-wrap">
        <el-pagination
            background
             @current-change = "handlechange"
            :current-page="page.currentPage"
            :page-sizes="pageSizes"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total">
        </el-pagination>
      </div> 
    </div>
    <!-- 修改dialog -->
    <farm-act-edit-dialog
    	:visible="editDialogVisible"
    	:form.sync='editForm'
      :type="editType"
    	@cancel="editDialogCancel"
      @confirm="editDialogConfirm"
    ></farm-act-edit-dialog>
  </div>
</template>
<style lang="scss" scoped>
  .content {
  &-container {

  }
  /***搜索栏***/
  &-search-wrap{
    padding: 15px;
    border-bottom: 1px solid #E8EBEE;
  }
  /***工具栏***/
  &-tools-wrap{
    padding: 15px;
  }
  /***内容栏***/
  &-table-wrap{
    position: relative;
    padding: 15px;
    .cell{
      .icon{
        margin-right: 10px;
      }
    }
  }
  /***分页***/
  &-pagination-wrap{
    text-align: right;
  	padding-top: 15px;
  }
}
</style>
<script>
import { mapState,mapGetters } from 'vuex'
import farmActEditDialog from '@/components/agriculture/farm/farmActEditDialog'
 
import {
  edit,
  del,
  list,
} from "@/api/farm/farmAct";

import adminMixins from "@/mixins/admin"
import { baseUrl } from '@/config/env';
 export default {
   name:'production',
   mixins:[adminMixins],
   components:{
  	farmActEditDialog
   },
   data(){
       return {
         baseUrl:baseUrl,
           keywords:'',
           loading:true,
           data:null,
           //1新增，2修改
           editType:1,
           //修改模态框的显示隐藏
           editDialogVisible:false,
           page: {
                pageSize: 10,
                currentPage: 1,
                total: 0
           },
           pageSizes:[10,20,30,40,50,100],
           editForm:null
       }
   },
   mounted(){
   //设置dom尺寸
    this.setSize();
  	this.loadData(this.page)
   },
   methods:{
     //分页数据
    handlechange(val){
      this.page.currentPage = val;
      this.loadData(this.page)
    },
     //点击操作的编辑
  	handleEdit(row){
  		this.editType = 2;
      this.editForm = row;
      //模态框显示
      this.editDialogVisible = true;
      
  	},
  	//点击操作的删除
  	handleDel(row){
  		this.$confirm('此操作将永久删除该农事信息, 是否继续?', '提示', {
          	confirmButtonText: '确定',
          	cancelButtonText: '取消',
          	type: 'warning'
        }).then(()=>{
        	return del(row.id);
        }).then((res) => {

        	this.loadData(this.page)
          	this.$message({
            	type: 'success',
            	message: '删除成功!'
          	});
        }).catch(() => {
          	this.$message({
            	type: 'info',
            	message: '已取消删除'
          	});          
        });
  	},
       	//请求table数据
        loadData(page, params = {}){
            this.loading = true;
            list(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
            this.loading = false;
            const result = res.data.data.records;
            
            this.page.currentPage = res.data.data.current;
            this.page.total = res.data.data.total;
            this.data = this.convertData(result);
            });
            
        },
        convertData(data){
          return data;
         },
        handleAdd(){
           this.editForm = {};
          this.editType = 1;
          //模态框显示
          this.editDialogVisible = true;
        },
        editDialogCancel(){
          this.editDialogVisible = false;
          this.editForm = null;
        },
        editDialogConfirm(form){
          this.editDialogVisible = false;

          edit(form.data).then((res)=>{
            this.loadData(this.page)
            this.$message({
              type: 'success',
              message: '添加成功!'
            });
          })
        },
   }
 }
</script>